import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button,Checkbox, Spin, Form, Input, Table, Card, Col, Row, DatePicker, Modal, Select,message } from 'antd'
import Modaladduser from './modaladduser.js';
/* 引用接口文档路径 */
import {
  usergetlist,userdelfetch
} from 'actions/admin'
import {
  commonauth
} from 'actions/common'

// import '../../style/userControl.less'

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      userList:"",//列表内容详情
      roletype:[],//角色类型
      single:{}
    }
    this.keyword={"loginName":"","name":""};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
    this.listStatus = "0";//帖子状态
    this.submitTime = "";//发布时间
    this.isadd=""
  }
  componentDidMount() {
    this.selectList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "loginName":this.props.form.getFieldValue('loginName'),
      "name":this.props.form.getFieldValue('name'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(usergetlist(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  
  submitTimeFn(value){//发布时间
    this.submitTime = value ? value._d.getTime() : "";
  }

  changeSelect(value){//贴子状态
    this.listStatus = value;
  }
  onchangeFN(value){
    console.log(value)
  }
  showModal(flag,single){//点击新增按钮
    this.isadd=flag;
    this.props.dispatch(commonauth("",(respose) => {
      this.setState({
        roletype: respose.respData.resultData,
      })
    }))
    if(this.isadd){
      this.setState({
        contentModal: true,
        single:{}
      })
    }else{
      this.setState({
        contentModal: true,
        single:single
      })
    }
    
    // this.props.dispatch(report(
    //   datajson,
    //   (respose) => {
    //     this.setState({
    //       list: respose,
    //     })
    // }))
  }
  contentModalCancel(){//关闭查看弹窗
        
      this.setState({
        contentModal: false,
      })
  }
  deluserlistFn(id,i){
    Modal.confirm({
      title: '确定要执行操作吗？',
      onOk:()=>{
        this.props.dispatch(userdelfetch({id:id},(respose) => {
          let list=this.state.list;
          list.respData.resultData.splice(i,1);
          this.setState({
            list: list
          });
          message.success(respose.respMsg)
        }))
      },
      onCancel:()=>{

      },
    })
    
  }
  columns() {//表格标题
    return [
      {
        title: '用户名',
        dataIndex: 'loginName',
        key: 'loginName',
        width: '10%',        
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: '10%',
      },
      {
        title: '电话',
        dataIndex: 'tel',
        key: 'tel',
        width: '10%',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '15%',
      },
      {
        title: '禁用',
        dataIndex: 'status',
        key: 'status',
        width: '15%',
        render: text => text==0?"已禁用":"已启用",
      },
      {
        title: '操作',
        // key: 'id',
        // fixed: 'right',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small"  onClick={this.showModal.bind(this,false,text)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>    
          <Button type="primary" size="small"  onClick={this.deluserlistFn.bind(this,this.state.list.respData.resultData[index].id,index)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>      
        </div>,
      },
    ]
  }



  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const CheckboxGroup = Checkbox.Group;
    
    const joinList = this.state.userList.respData ? this.state.userList.respData.accountList[0] :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="用户名">      
              {
                getFieldDecorator('loginName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <FormItem label="姓名">      
              {
                getFieldDecorator('name', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <Button type="primary" htmlType="submit" style={{marginRight:"5px"}}>搜索</Button>
            <Button type="primary" onClick={this.showModal.bind(this,true)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={respData.resultData}
            pagination={{ total: respData.count, current:this.currentNumber, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 新增用户信息 */}
        {
          this.state.contentModal ?
          <Modaladduser single={this.state.single} isadd={this.isadd} roletype={this.state.roletype} callback={this.selectList.bind(this)} contentModal={this.state.contentModal} contentModalCancel={this.contentModalCancel.bind(this)}/>
          : ""
        }
        </div>
    )
  }
}
